<!--
 * @Date: 2024-03-20 10:21:06
 * @Author: ljc
 * @LastEditors: g05047
 * @LastEditTime: 2025-01-14 15:45:27
 * @Description: 分类管理抽屉界面
-->
<template>
  <el-drawer v-if="visible"
    v-model="visible"
    size="50%"
    append-to-body
    :show-close="true"
    :with-header="true">
    <template #header="{ titleId }">
      <h3 :id="titleId"
        class="header-title">{{ title }}</h3>
    </template>
    <div class="drawer-content">
      <CategoryTable class="catergory-table"
        :funcType="funcType" />
    </div>
  </el-drawer>
</template>

<script setup>
import CategoryTable from '../component/CategoryTable.vue';
const props = defineProps({
  title: {
    type: String,
    default: '分类管理',
  },
  funcType: {
    type: String,
    default: '1'
  },
})
const visible = ref(false);
/**
 * 打开抽屉
 * @param {Object} nodeValue - 传入的节点值
 */
const handleOpen = (nodeValue) => {
  visible.value = true;
}
/**
 * 关闭抽屉
 */
const handleClose = () => {
  visible.value = false;
}
// 对外暴露方法
defineExpose({
  handleOpen,
  handleClose
});
</script>
<style lang="scss" scoped>
.header-title {
	font-weight: 700;
}
.drawer-content {
	height: 100%;
	.catergory-table {
		height: 100%;
	}
}
</style>
